<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短视频一键去水印</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        a{
            text-decoration: none;
            color: black;
        }
        body{
            font-family: "花体";
            background: url('https://img.zcool.cn/community/038c0c258bd2b9fa801219c779a0b67.jpg') no-repeat;
            background-size: cover;
            background-color: #f0f0f0;
        }
        .wrap{
            width: 550px;
            height: 1140px;
            /* border: 1px solid red; */
            background-color: aliceblue;
            opacity: .6;
            margin: auto;
        }
        /* 顶部 */
        .wrap .top{
            position: relative;
            height: 400px;
            width: 550px;
            background-color: #364af7;
            color: white;
            border-radius: 5%;
            word-spacing: 4%;
            /* border: 1px solid aqua; */
        }
        .wrap .top h3{
            position: absolute;
            top: 5%;
            left: 2%;
        }
        .wrap .top textarea::-webkit-textarea-placeholder{
            position: absolute;
            font-size: 14px;
            font-family: "花体";
            top: 10%;
        }
        .wrap .top p{
            position: absolute;
            top: 18%;
            left: 2%;
        }
        .wrap .top .entry{
            position: absolute;
            height: 150px;
            width: 520px;
            border-radius: 10%;
            vertical-align: text-top;
            left: 2%;
            top: 35%;
        }
        .wrap .top div input{
            position: absolute;
            height: 60px;
            width: 120px;
            border-radius: 10%;
            top: 78%;
            font-family: "花体";
            font-weight: bold;
            cursor: pointer;
            font-size: 18px;
            left: 5%;
        }
        .wrap .top div input:nth-child(1){
            position: absolute;
            left: 6%;
        }
        .wrap .top div input:nth-child(2){
            position: absolute;
            left: 38%;
        }
        .wrap .top div input:nth-child(3){
            position: absolute;
            left: 70%;
        }
        .wrap .top div input:hover{
            color: white;
            background-color: aqua;
            transition: .5s;
        }
        /* 视频标题 */
        .wrap .title{
            position: relative;
            height: 160px;
            width: 500px;
            margin: auto;
            margin-top: 5%;
            border-radius: 5%;
            background-color: #f0f0f0;
            /* border: 1px solid red; */
        }
        .wrap .title h3{
            position: absolute;
            top: 5%;
            left: 2%;
        }
        .wrap .title p{
            position: absolute;
            /* border: 1px solid red; */
            width: 450px;
            height: 30px;
            top: 30%;
            overflow: hidden;
            left: 5%;
        }
        .wrap .title p span{
            margin-left: 5%;
        }
        .wrap .title input{
            position: absolute;
            height: 50px;
            width: 500px;
            background-color: #364af7;
            bottom: 0;
            border: none;
            font-family: "花体";
            cursor: pointer;
            font-weight: bold;
            font-size: 18px;
            color: white;
        }
        .wrap .title input:hover{
            background-color: aqua;
            color: orangered;
            transition: .6s;
        }
        /* 缩略图 */
        .wrap .thumbnail{
            position: relative;
            height: 160px;
            width: 500px;
            margin: auto;
            margin-top: 5%;
            border-radius: 5%;
            background-color: #f0f0f0;
            /* border: 1px solid red; */
        }
        .wrap .thumbnail h3{
            position: absolute;
            top: 5%;
            left: 2%;
        }
        .wrap .thumbnail p{
            position: absolute;
            /* border: 1px solid red; */
            width: 450px;
            height: 30px;
            top: 30%;
            overflow: hidden;
            left: 5%;
        }
        .wrap .thumbnail div{
            position: absolute;
            width: 500px;
            height: 50px;
            border-radius: 6%;
            /* border: 1px solid red; */
            bottom: 0;
        }
        .wrap .thumbnail div input{
            height: 50px;
            color: white; 
            cursor: pointer;
            border: none;
        }
        .wrap .thumbnail div input:nth-child(1){
            float: left;
            width: 50%;
            background-color: #364af7;
            font-family: '花体';
            font-weight: bold;
            font-size: 18px;
        }
        .wrap .thumbnail div input:nth-child(2){
            float: right;
            width: 50%;
            font-family: '花体';
            background-color: orange;
            font-weight: bold;
            font-size: 18px;
        }
        .wrap .thumbnail p a:hover{
            color: red;
            transition: .6s;
        }
        .wrap .thumbnail div input:hover{
            background-color: aqua;
            color: orangered;
            transition: .6s;
        }
        /* 视频链接 */
        .wrap .link{
            position: relative;
            height: 380px;
            width: 500px;
            margin: auto;
            margin-top: 5%;
            background-color: #f0f0f0;
            /* border: 1px solid red; */
        }
        .wrap .link h3{
            position: absolute;
            top: 5%;
            left: 2%;
        }
        .wrap .link p{
            position: absolute;
            height: 280px;
            width: 130px;
            overflow: hidden;
            left: 5%;
            top: 16%;
            /* border: 1px solid red; */
        }
        .wrap .link .videoview{
            position: absolute;
            bottom: 5%;
            right: 5%;
        }
        .wrap .link p a:hover{
            color: red;
            transition: .6s;
        }
        @font-face {
            font-family: "花体";
            src: url('../../front/逐浪花体.otf');
        }
    </style>
</head>
<body>
    <div class="wrap">、
        <!-- 顶部 -->
        <div class="top">
            <h3>短视频一键解析去水印</h3>
            <p>将短视频链接复制到下方输入框，或复制链接后点击一键去水印按钮，即可获取无水印视频信息</p>
            <textarea class="entry" name="" id="" rows="6" cols="50" placeholder="请输入或点击下方按钮粘贴需要解析去水印的链接"></textarea>
            <div>
                <input class="first" type="button" value="一键去水印">
                <input class="second" type="button" value="粘贴链接">
                <input class="third" type="button" value="清空数据">
            </div>
        </div>
        <!-- 标题区 -->
        <div class="title">
            <h3>视频标题</h3>
            <p class="p1">
                <span></span>
            </p>
            <input class="forth" type="button" value="复制标题">
        </div>
        <!-- 缩略图区 -->
        <div class="thumbnail">
            <h3>缩略图</h3>
            <p class="fifth"><a href="" target="_blank"></a></p>
            <div class="box">
                <input class="thumbnailone" type="button" value="复制链接">
                <input class="thumbnailtwo" type="button" value="下载缩略图">
            </div>
        </div>
        <!-- 视频区 -->
        <div class="link">
            <h3>视频链接</h3>
            <p class="sixth"><a href=""></a></p>
            <video class="videoview" width="250" height="300" controls autoplay>
                <source src="movie.ogg" type="video/ogg">
                <source src="movie.mp4" type="video/mp4">
                <source src="movie.webm" type="video/webm">
                <object data="movie.mp4" width="320" height="240">
                <embed class="seventh" width="320" height="240" src="movie.swf">
                </object>
            </video>
        </div>
    </div>
    <script>
        let fetchLinkByButton = document.querySelector(".wrap .top .entry"),//一键去水印文本框的内容
            fetchLinkButton1  = document.querySelector(".wrap .top div .first"),//一键去水印按钮
            fetchLinkButton2  = document.querySelector(".wrap .top div .second"),//粘贴链接按钮
            fetchLinkButton3  = document.querySelector(".wrap .top div .third"),//清空数据按钮
            titleByDuplicate  = document.querySelector(".wrap .title .forth"),//获取标题按钮
            titleInShow       = document.querySelector(".wrap .title .p1"),//视频标题元素
            thumbnailInLink   = document.querySelector(".wrap .thumbnail .box .thumbnailone"),//复制链接按钮
            thumbnailByDownload   = document.querySelector(".wrap .thumbnail .box .thumbnailtwo"),//下载缩略图按钮
            thumbnailByLink   = document.querySelector(".wrap .thumbnail .fifth"),//缩略图链接元素
            vedioByLink       = document.querySelector(".wrap .link .sixth"),//获取视频链接元素
            vedioByClick      = document.querySelector(".wrap .link .videoview .seventh")//获取视频
    </script>
</body>
</html>